 <!DOCTYPE html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">

     <script src="js/jquery-1.10.2.min.js"></script>

     <!-- Fotorama -->
     <link href="css/fotorama.css" rel="stylesheet">
     <script src="js/fotorama.js"></script>
 </head>

<body>


<div class="wrapper" style="font-family: '微软雅黑';" >
 <!--header-->
<div class="header">
   <div  class="header_back"><img src="images/01/header_back.png"></div>
    <div class="header_tel"><img id="" class="btn"   src="images\01\top_category.png"></div>
    <div style="padding: 0 3rem;"><input style="width: 100%; height: 3rem;border-radius:0.5rem ; border:1px ;
                                    font-size:1.0rem; background: url(images/01/search.png) no-repeat 0px #e3e3e3 "
                                      type="text" placeholder="       输入目的地/景点/酒店自由行" /></div>
</div>


    <div style="position: relative">
        <div class="popup">
            <ul style="list-style-type: none;;padding-left: 0; margin-top: 2.8rem">
                <li>全部主题</li>
                <li>山水景观</li>
                <li>温泉度假</li>
                <li>酷夏漂流</li>
                <li>亲子活动</li>
            </ul>
        </div>

    </div>

    <div style="width: 100%; height: 12rem">
     <!--   <div class="example2">
            <ul>
                <li><img src="images\01\ban_2.jpg" alt="1"/></li>
                <li><img src="images\01\ban_2.jpg" alt="2"/></li>
                <li><img src="images\01\ban_2.jpg" alt="3"/></li>
                <li><img src="images\01\ban_2.jpg" alt="4"/></li>
            </ul>
            <ol>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </div>-->
        <div class="fotorama" data-width="1100" data-ratio="800/467" data-max-width="100%">
            <img src="images\01\ban_1.jpg">
            <img src="images\01\ban_2.jpg">
            <img src="images\01\commend.jpg">
            <img src="images\01\ban_4.jpg">
        </div>


</div>
    <div style="width: 100%; height: 2.2rem; text-align: center">
    <table> <tr>

        <td width="380rem" ><img src="images\01\jd_arr1.png">热门景点</span></td>
        <td width="200rem" ><span style="color: #b9b9b9">|</span></td>
        <td width="300rem"><img src="images\01\jd_arr2.png">我身边</td>

    </tr></table>

</div>

<div style="width: 100%; height:0.5rem; background-color: #e3e3e3"></div>
    <div style="width: 100%; height: 2.2rem; text-align: center">
        <table>
            <td width="50rem"></td>
            <td width="300rem" >位置区域 <img id="area" class="btn" src="images\01\channelBg.png"></span></td>
            <td width="200rem" ><span style="color: #b9b9b9">|</span></td>
            <td width="300rem">达人推荐 <img src="images\01\channelBg.png"></td>
            <td width="200rem" ><span style="color: #b9b9b9">|</span></td>
            <td width="300rem">全部主题 <img src="images\01\channelBg.png"></td>

        </tr></table>

    </div>
    <div style="position: relative">
        <div class="popup">
            <ul style="list-style-type: none;padding-left:0;margin-top:0">
                <li>全部主题</li>
                <li>山水景观</li>
                <li>温泉度假</li>
                <li>酷夏漂流</li>
                <li>亲子活动</li>
            </ul>
        </div>

    </div>

    <div style="width: 100%; height:0.1rem; background-color: #dddddd"></div>


    <!-- 图片开始-->
    <div>
    <div style="width: 100%; height:7rem">
        <div style="width: 25%; height: 80%; margin-top: 0.5rem; float: left"><img style="width: 100%; border-radius: 0.5rem" src="images\01\jd_pic.jpg"></div>
        <div style="width: 75%; height: 80%; margin-top: 0.5rem; float: left">
            <div><span style="font-size: 1.2rem ;font-weight:bold;">&nbsp;洞头望海楼景区</span></div>
            <div style="margin-top: 0.4rem"> <span > &nbsp;<img style="width:2rem" src="images/01/fan.png;">   <img style="width:2rem" src="images/01/juan.png;"></span>
                                                 <span style="float: right">
                                                 <span style="font-size: 1.2rem;color: #ff6000;font-weight:bold;">$100元</span>
                                                 <span style="color: #999999;">起</span></span></div>
            <div style="margin-top: 0.2rem;"><span style="font-weight:bold;font-size: 1rem"> &nbsp;风景名胜 </span> <span style="float: right; color: #b9b9b9">$240</span></div>
            <div style="margin-top: 0.2rem;font-size: 1rem"> &nbsp;已售2008</div>


        </div>
    </div>
    <div style="width: 100%; height:0.1rem; background-color: #dddddd"></div>
    <div style="width: 100%; height:7rem">
        <div style="width: 25%; height: 80%; margin-top: 0.5rem; float: left"><img style="width: 100%; border-radius: 0.5rem" src="images\01\jd_pic.jpg"></div>
        <div style="width: 75%; height: 80%; margin-top: 0.5rem; float: left">
            <div><span style="font-size: 1.2rem ;font-weight:bold;">&nbsp;洞头望海楼景区</span></div>
            <div style="margin-top: 0.4rem"> <span > &nbsp;<img style="width:2rem" src="images/01/fan.png;">   <img style="width:2rem" src="images/01/juan.png;"></span>
                                                 <span style="float: right">
                                                 <span style="font-size: 1.2rem;color: #ff6000;font-weight:bold;">$100元</span>
                                                 <span style="color: #999999;">起</span></span></div>
            <div style="margin-top: 0.2rem;"><span style="font-weight:bold;font-size: 1rem"> &nbsp;风景名胜 </span> <span style="float: right; color: #b9b9b9">$240</span></div>
            <div style="margin-top: 0.2rem;font-size: 1rem"> &nbsp;已售2008</div>


        </div>
    </div>
    <div style="width: 100%; height:0.1rem; background-color: #dddddd"></div>
    <div style="width: 100%; height:7rem">
        <div style="width: 25%; height: 80%; margin-top: 0.5rem; float: left"><img style="width: 100%; border-radius: 0.5rem" src="images\01\jd_pic.jpg"></div>
        <div style="width: 75%; height: 80%; margin-top: 0.5rem; float: left">
            <div><span style="font-size: 1.2rem ;font-weight:bold;">&nbsp;洞头望海楼景区</span></div>
            <div style="margin-top: 0.4rem"> <span > &nbsp;<img style="width:2rem" src="images/01/fan.png;">   <img style="width:2rem" src="images/01/juan.png;"></span>
                                                 <span style="float: right">
                                                 <span style="font-size: 1.2rem;color: #ff6000;font-weight:bold;">$100元</span>
                                                 <span style="color: #999999;">起</span></span></div>
            <div style="margin-top: 0.2rem;"><span style="font-weight:bold;font-size: 1rem"> &nbsp;风景名胜 </span> <span style="float: right; color: #b9b9b9">$240</span></div>
            <div style="margin-top: 0.2rem;font-size: 1rem"> &nbsp;已售2008</div>


        </div>
    </div>
    <div style="width: 100%; height:0.1rem; background-color: #dddddd"></div>
    <!--图片结束-->
    </div>

<div style="width: 100%; text-align: center;color: #999999; margin-top: 1rem">点击查看更多...</div>
<div style="width: 100%; background-color: #EEEEEE; height: 3rem; margin-top: 0.8rem; position: fixed; bottom: 0px;">
    <table style="text-align: center;font-size: 1rem;  color: #878a8c">
        <tr>
             <td width="300rem"><img src="images/01/bottom_home_click.png"></td>
             <td  width="300rem"><img src="images/01/bottom_find.png"></td>
             <td width="300rem"><img src="images/01/bottom_shop.png"></td>
             <td width="150rem"><img src="images/01/bottom_mine.png"></td></tr>
        <tr>
            <td width="300rem">首页</td>
            <td  width="300rem">发现</td>
            <td width="300rem">购物车</td>
            <td width="150rem">我的</td></tr>
    </table>

</div>




   <!--wrapper--> </div>

<div id="b" class="b"></div>

<script src="js/jquery-1.11.3.js"></script>
<script>

    $(".btn").click(function(){
             var index=$(".btn").index(this);
             if($(".popup").eq(index).css("display")=='block'){

                 $(".popup").eq(index).css("display","none");
                 $("#b").css("display","none");
        }
        else{
                 $(".popup").eq(index).css("display","block");
                 $("#b").css("display","block") ;
        }
    });




</script>

</body>
</html>